<template>
  <div class="right">
    <Advertise1 :arr="this.ad1arr"></Advertise1>
    <Advertise1 :arr="this.ad2arr"></Advertise1>
    <div class="relevant" v-if="relevantArr.length">
      <p class="title">{{ menutitle }}相关</p>
      <div class="main">
        <template v-for="(item, index) in relevantArr">
          <span
            :key="index"
            class="relvaitem"
            :data-cookid="item.id"
            @click="fto($event)"
            v-if="item.id != menuid"
          >
            {{ item.title }}
          </span>
        </template>
      </div>
    </div>
    <div class="lookaround">
      <p class="title">随便看看</p>
      <ul class="main">
        <li
          v-for="(item, index) in lookArr"
          :key="index"
          class="look"
          :data-classid="item.classer"
          @click="ftoclass($event)"
        >
          {{ item.classer }}
        </li>
      </ul>
    </div>
    <Advertise2></Advertise2>
    <div class="erweima"></div>
    <div class="describe" ref="describe">
      <p>该菜谱创建于 {{ createdtime }}</p>
      <p>{{ storecount }} 收藏</p>
      <p>
        版权归作者所有，没有作者本人的书面许可任何人不得转载或使用整体或任何部分的内容。
      </p>
    </div>
  </div>
</template>

<script>
import Advertise1 from "./components/Advertise1.vue";
import Advertise2 from "./components/Advertise2.vue";

export default {
  components: {
    Advertise1,
    Advertise2,
  },
  data: () => {
    return {
      lookArr: [],
      relevantArr: [],
      storecount: "",
      ad1arr: [
        {
          img: "https://lupic.cdn.bcebos.com/20210629/2000029256_14.jpg",
          text: "大闸蟹礼品卡",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E5%A4%A7%E9%97%B8%E8%9F%B9%E7%A4%BC%E5%93%81%E5%8D%A1&tn=91014121_cpr&nwd=&rsv_lu=1_pn&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH0vn1RY0ZnqnW7hrjTkuWwhnjm1P1Tsm6KYUHYzPWb1P104PW00mvmqnfKzmWYs0AkdpvbqnfKWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15HFbuHT3nH04m10YPH-WnHc0UZN1IjYvnHF-uyDdr0K_IyPY5HmknhN-mHI-0Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1dMX6KWI7qYpgfq0APYgvP9IjY0mLwxUA7B5fKYTh7buHDqn0KYTh7buHcqn0KBThfq0AdbUjY0uZws5HD0mywWUA71T1Ys0ZIG5Hf0uMPWpAdb5Hc0IAfqnWbsPWndP0KWIMFk5Hn4nHmvnsKCmy7WTjYYPjnd0Auz5Hc30ZPz5HczP6KBugP_5Hm0UZNLIZcqnWnkPjc3njmzrjbYPW0sPW6dP0K-XZKGujYznj0LrjFxnW0kP1D1g1csPj0zP6KdThsqpZwYTZn-nYD-nbm-nbuLILT-nbN3py7WpZNhmy4MFHF7mvqVFHFAThNWpgK-FHFAnH0vPjf1rHb3FHFA00",
        },
        {
          img: "https://lupic.cdn.bcebos.com/20200412/3029690217_14_800_572.jpg",
          text: "网页制作",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C&tn=91014121_cpr&nwd=%E5%88%B6%E4%BD%9C%E5%85%AC%E5%8F%B8%E7%BD%91%E9%A1%B5&rsv_lu=1_pn&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH0vn1RY0Znqnjnduynkmvm1PynzPW6zm6KYUHYzPWb1P104PW00mvmqnfKzmWYs0Akdpvbqn6KWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15HD1mW6LnjR3P1mLrAm4P1c0UZN1IjYvnHFhnHKbPsK_IyPY5HmknhmknH6d0Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1d8pW0z0APYgLwGIjY0mLwxmv7Y5fKWI7q_mycq0Zwzmyw-nHYs0Zwzmyw-nWYs0AFzujY0Uyw_5fKbIZ0qnfK9uAP_mgP15H00IvbqP0KhTvPCUyfqn6KYujYzrH0vn1RY0APvTMDqnHnznHc3n0KCmy7WTjYvrHf0uMcqnW60TLcqnWcv0AF-TvsqP6K_IgIYTWYknWbdP1m4nWmYnHfsrjf1PHbzP6K-XZKGujYznjfsnWuxnW0YnHTk0ZNzUjdCIZwsTzR1fiRzwBRzwMILIzRzwg9GmyPCIyu9UhT-nbNWUvY-nbuzuyPGTAR-nbmknjmYPjn4rH6-nbm0",
        },
        {
          img: "https://lupic.cdn.bcebos.com/20210629/17837897_14.jpg",
          text: "干锅香辣虾",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E5%B9%B2%E9%94%85%E9%A6%99%E8%BE%A3%E8%99%BE&tn=91014121_cpr&nwd=%E5%B9%B2%E9%94%85%E7%81%AB%E9%94%85&rsv_lu=1_pn&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH0vn1RY0Znqn1N9Phm4m164uAfdn1KBr0KYUHYzPWb1P104PW00mvmqnfKzmWYs0AkdpvbqnsKWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15HD1mW6LnjR3P1mLrAm4P1c0UZN1IjYvnHFhnHKbPsK_IyPY5Hmknhmknyc10Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1d8pW0z0APYgLwGIjY0mLwxmv7Y5fKWI7q_mycq0Zwzmyw-nHYs0Zwzmyw-nWYs0AFzujY0Uyw_5fKbIZ0qnfK9uAP_mgP15H00IvbqP0KhTvPCUyfqn6KYujYzrH0vn1RY0APvTMDqPj0dnjf30A99myPs5HDLPfKhTWYzr0K1TWYznWm0mhN1UjYv0AkdILwz5Hm3rjc1rHc3n1D3PH6dn163nfK-XZKGujYznjfsnWuxnW0YnHTk0ZNzUjdCIZwsTzR1fiRzwBRzwMILIzRzwg9GmyPCIyu9UhT-nbNWUvY-nbuzuyPGTAR-nbmknjmYPjn4rH6-nbm0",
        },
        {
          img: "https://lupic.cdn.bcebos.com/20210629/26651121_14.jpg",
          text: "汉堡加盟排行榜",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E6%B1%89%E5%A0%A1%E5%8A%A0%E7%9B%9F%E6%8E%92%E8%A1%8C%E6%A6%9C&tn=91014121_cpr&nwd=%E9%94%85%E8%B4%B4%E5%8A%A0%E7%9B%9F%E5%BA%97%E6%8E%92%E8%A1%8C%E6%A6%9C&rsv_lu=1_pn&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH0vn1RY0ZnquWndmWckPvf4nHmLrHRknfKYUHYzPWb1P104PW00mvmqnfKzmWYs0AkdpvbqP0KWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15HD1mW6LnjR3P1mLrAm4P1c0UZN1IjYvnHFhnHKbPsK_IyPY5HmknhmknWK90Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1d8pW0z0APYgLwGIjY0mLwxmv7Y5fKWI7q_mycq0Zwzmyw-nHYs0Zwzmyw-nWYs0AFzujY0Uyw_5fKbIZ0qnfK9uAP_mgP15H00IvbqP0KhTvPCUyfqn6KYujYzrH0vn1RY0APvTMDqnWbLn1c10A99myPs5Hn1rfKhTWYzr0K1TWYznWm0mhN1UjYv0AkdILwz5HT3nWRknjDznj0LP1fLPHnvP1R0ug9spyfqnW0Ynjcvg1csPjDLnfKdThsqpZwYTZn-nYD-nbm-nbuLILT-nbN3py7WpZNhmy4MFHF7mvqVFHFAThNWpgK-FHFAnH0vPjf1rHb3FHFA00",
        },
      ],
      ad2arr: [
        {
          img: "https://lupic.cdn.bcebos.com/20210629/27646687_14.jpg",
          text: "甜品学习",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E7%94%9C%E5%93%81%E5%AD%A6%E4%B9%A0&tn=91014121_cpr&nwd=%E5%AD%A6%E4%B9%A0%E8%9B%8B%E7%B3%95&rsv_lu=1_pn&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH0vPjDd0ZnqPjPbuWnzrH01uAu9mym1mfKYUHYzPWb1P104PW00mvmqnfKzmWYk0Akdpvbqn6KWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15yR4uHbsPWDduWKBuH-9uHm0UZN1IjYvnHFhnHKbPsK_IyPY5HmknhmknvDY0Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1d8pW0z0APYgLwGIjY0mLwxmv7Y5fKWI7q_mycq0Zwzmyw-nHYs0Zwzmyw-nWYs0AFzujY0Uyw_5fKbIZ0qnfK9uAP_mgP15H00IvbqP0KhTvPCUyfqn6KYujYzrH0vPjDd0APvTMDqP1DzP1D30A99myPs5HmsP0KhTWYzr0K1TWYznWm0mhN1UjYv0AkdILwz5HD1nWfzPHnvPHDvnWR4rHDdP1c40AN3TA-b5HcsnHTYnNtznjfsnWuxnW0YnHTk0ZNzUjdCIZwsTzR1fiRzwBRzwMILIzRzwg9GmyPCIyu9UhT-nbNWUvY-nbuzuyPGTAR-nbmknjmYPjn4rH6-nbm0",
        },
        {
          img: "https://lupic.cdn.bcebos.com/20210629/2015864977_14.jpg",
          text: "汽车衡",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E6%B1%BD%E8%BD%A6%E8%A1%A1&tn=91014121_cpr&nwd=%E7%94%B5%E5%AD%90%E6%B1%BD%E8%BD%A6%E8%A1%A1&rsv_lu=1_pn&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH0vPjDd0Znqrjc3PAczPvDzuymduHnzufKYUHYzPWb1P104PW00mvmqnfKzmWYk0AkdpvbqP0KWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15yR4uHbsPWDduWKBuH-9uHm0UZN1IjYvnHFhnHKbPsK_IyPY5HmknhmknvPb0Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1d8pW0z0APYgLwGIjY0mLwxmv7Y5fKWI7q_mycq0Zwzmyw-nHYs0Zwzmyw-nWYs0AFzujY0Uyw_5fKbIZ0qnfK9uAP_mgP15H00IvbqP0KhTvPCUyfqn6KYujYzrH0vPjDd0APvTMDqrj6vnHm40A99myPs5HDsrHn0uMcqnW60TLcqnWcv0AF-TvsqP6K_IgIYTWYkn104n103PHnvrHRkrjnkrjcvP6K-XZKGujYznjDLPj7xnW0Ynjcvg1csPjDLnfKdThsqpZwYTZn-nYD-nbm-nbuLILT-nbN3py7WpZNhmy4MFHF7mvqVFHFAThNWpgK-FHFAnH0vPjf1rHb3FHFA00",
        },
        {
          img: "https://lupic.cdn.bcebos.com/20210629/26631971_14.jpg",
          text: "恐龙制造",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E6%81%90%E9%BE%99%E5%88%B6%E9%80%A0&tn=91014121_cpr&nwd=&rsv_lu=1_pn&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH0vn1RY0ZnqmWmvnjD3rAnsnhcYmhRYn0KYUHYzPWb1P104PW00mvmqnfKzmWYs0AkdpvbqnsKWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15y7hrAN-nvNBrj99PhDkmyD0UZN1IjYvnHFhnHP-msK_IyPY5HmknhmkPjK-0Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1d8pW0z0APYgLwGIjY0mLwxmv7Y5fKWI7q_mycq0Zwzmyw-nHYs0Zwzmyw-nWYs0AFzujY0Uyw_5fKbIZ0qnfK9uAP_mgP15H00IvbqP0KhTvPCUyfqn6KYujYzrH0vn1RY0APvTMDqn1mvPWTsPWD0pA79mL0qnHbd0Auz5Hc30ZPz5HczP6KBugP_5Hm0UZNLIZcqnH6sPW64PHbzrHbLrjTvnjRLnH60ug9spyfqnW0sP16zg1csnHTdP-tznjfsnWm0IgF_5y9YIZK1FHPKFHFAFHFAILILFHF7XA-9mv9duh78uzRzwyPEUiRzwMF-mv-suiRzwWDsPWf4nHD1PaRzw60",
        },
        {
          img: "https://lupic.cdn.bcebos.com/20210629/2001886797_14.jpg",
          text: "logo设计",
          url: "https://www.baidu.com/s?ie=utf-8&wd=logo%E8%AE%BE%E8%AE%A1&tn=91014121_cpr&nwd=%E5%85%AC%E5%8F%B8logo%E8%AE%BE%E8%AE%A1logo%E8%AE%BE%E8%AE%A1&rsv_lu=1_pn&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH0vPjDd0Znqmy7BP1IbPWIbPW9bmvfkPsKYUHYzPWb1P104PW00mvmqnfKzmWYk0AkdpvbqnsKWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15HR3mW--mvwWP1N9PWcLnj60UZN1IjYvnHFhnHP-msK_IyPY5HmknhmkPjn10Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1dYmsKWI7qYpgfq0APYgvP9IjY0mLwxUA7B5fKYTh7buHDqn0KYTh7buHcqn0KBThfq0AdbUjY0uZws5HD0mywWUA71T1Ys0ZIG5Hf0uMPWpAdb5Hc0IAfqnWbsPWfkPfKWIMFk5HD1PWbYPHbs0A99myPs5HDsnWD0uMcqnW60TLcqnWcv0AF-TvsqP6K_IgIYTWY3njcLPH0Ln1T1P1bzPWD3PWbL0AN3TA-b5HcsnHcdn7tznjfsnWm0IgF_5y9YIZK1FHPKFHFAFHFAILILFHF7XA-9mv9duh78uzRzwyPEUiRzwMF-mv-suiRzwWDsPWf4nHD1PaRzw60",
        },
      ],
    };
  },
  props: ["menutitle", "menuid", "createdtime"],
  methods: {
    fto(e) {
      this.$router.push({
        path: `/menudetail/${e.target.dataset.cookid}`,
      });
    },
    ftoclass(e) {
      this.$router.push({
        path: `/qhxsfirst?id=${e.target.dataset.classid}`,
      });
    },
  },
  mounted() {
    // 将描述元素传给父
    this.$emit("update:describe", this.$refs.describe);
    this.$axios("/wxw/wrelevant", {
      params: {
        cookid: this.menuid,
      },
    }).then((res) => {
      this.relevantArr = res.data;
    });
    this.$axios("/wxw/wclassinfo").then((res) => {
      this.lookArr = res.data;
    });
    this.$axios("/wxw/wshoucanginfo", {
      params: {
        cookid: this.menuid,
      },
    }).then((res) => {
      this.storecount = res.data[0].count;
    });
  },
  watch: {
    menuid() {
      this.$axios("/wxw/wshoucanginfo", {
        params: {
          cookid: this.menuid,
        },
      }).then((res) => {
        this.storecount = res.data[0].count;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.right {
  padding-top: 150px;
  width: 300px;
}
.relevant {
  margin-bottom: 30px;
  .title {
    font-size: 20px;
    color: #c0ae7d;
  }
  .main {
    font-size: 16px;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 280px;
    .relvaitem {
      display: inline-block;
      width: 130px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 7px 0;
      cursor: pointer;
    }
    .relvaitem:hover {
      color: red;
    }
  }
}
.lookaround {
  margin-bottom: 50px;
  .title {
    font-size: 20px;
    color: #c0ae7d;
  }
  .main {
    font-size: 16px;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 280px;
    .look {
      display: inline-block;
      width: 130px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 7px 0;
      cursor: pointer;
    }
    .look:hover {
      color: red;
    }
  }
}
.erweima {
  width: 290px;
  height: 250px;
  border: 1px solid #eee;
  margin-top: 60px;
  cursor: pointer;
  box-shadow: 0px 0px 9px #eee;
}
.describe {
  width: 290px;
  margin-top: 60px;
  cursor: pointer;
  color: #909090;
  p {
    margin: 15px;
  }
}
li {
  list-style: none;
}
* {
  padding: 0;
  margin: 0;
}
</style>